<template>
  <div>
    <div class="search_condition_bar">
      <el-col :span="24" class="warp-breadcrum">
        <!--搜索栏-->
        <el-col :span="24" class="toolbar">
          <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="菜单名称">
              <el-input
                clearable
                v-model="menuAliasQry"
                placeholder="菜单名"
                @change="queryMenusInner"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单类型">
              <template>
                <el-select
                  clearable
                  v-model="menuType"
                  placeholder="菜单类型"
                  value-key="type"
                  style="width:208px;"
                  @change="queryMenusInner"
                >
                  <el-option label="不限" :value="null"></el-option>
                  <el-option
                    v-for="menuTypeObj in this.GlobalConstants.MENU_TYPE"
                    :key="menuTypeObj.type"
                    :label="menuTypeObj.label"
                    :value="menuTypeObj.type"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="菜单层级">
              <template>
                <el-select
                  clearable
                  v-model="menuLevel"
                  placeholder="菜单层级"
                  value-key="type"
                  style="width:208px;"
                  @change="queryMenusInner"
                >
                  <el-option label="不限" :value="null"></el-option>
                  <el-option
                    v-for="menuLevelObj in this.GlobalConstants.MENU_LEVEL"
                    :key="menuLevelObj.level"
                    :label="menuLevelObj.label"
                    :value="menuLevelObj.level"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryMenus">查询</el-button>
              <el-button type="primary" @click="queryMenusInner">刷新</el-button>
              <el-button type="primary" @click="newMenuPre">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </div>

    <hr />
    <el-col :span="24" class="toolbar block">
      <!--数据分页
            layout：分页显示的样式
            :page-size：每页显示的条数
            :total：总数
            具体功能查看地址：http://element.eleme.io/#/zh-CN/component/pagination
      -->
      <el-pagination
        layout="total,prev,pager,next,jumper"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-size="pageSize"
        :total="totalElements"
        background
        :hide-on-single-page="false"
        style="text-align: center;"
      ></el-pagination>
    </el-col>
    <div class="search_result_list">
      <el-table :data="menus" stripe border v-loading="listLoading">
        <el-table-column
          type="index"
          :index="index"
          label="序号"
          width="69px"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="alias"
          label="菜单名称"
          width="150px"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="路由" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="icon"
          label="菜单图标"
          width="150px"
          header-align="center"
          align="center"
        ></el-table-column>

        <el-table-column label="菜单类型" width="120px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 'NONE'" type="primary">中间节点</el-tag>
            <el-tag v-if="scope.row.type == 'LINK'" type="primary">叶子节点</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="菜单层级" width="120px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag type="primary">{{calMenuLevel(scope.row.id)}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="description" label="菜单描述" header-align="center" align="center"></el-table-column>

        <el-table-column label="操作" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              title="删除权限"
              type="primary"
              icon="el-icon-delete"
              circle
              @click="menuDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增菜单弹框 -->
    <el-dialog
      title="新增菜单"
      @close="addDialogClose"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
    >
      <!-- 新增菜单的表单 -->
      <el-form :model="addMenuModel" label-width="100px">
        <el-form-item prop="alias" label="菜单名称">
          <el-input v-model="addMenuModel.alias"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="菜单路由">
          <el-input
            title="菜单类型为中间节点时无需填写此项"
            v-model="addMenuModel.name"
            :disabled="addMenuModel.type == 'NONE'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="菜单图标">
          <el-input v-model="addMenuModel.icon"></el-input>
        </el-form-item>
        <el-form-item prop="type" label="菜单类型">
          <template>
            <el-select
              v-model="addMenuModel.type"
              placeholder="菜单类型"
              value-key="type"
              style="width:208px;"
              @change="changeMenuType"
            >
              <el-option
                v-for="menuTypeObj in this.GlobalConstants.MENU_TYPE"
                :key="menuTypeObj.type"
                :label="menuTypeObj.label"
                :value="menuTypeObj.type"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="addMenuLevel" label="菜单层级">
          <template>
            <el-select
              v-model="addMenuLevel"
              placeholder="菜单层级"
              value-key="type"
              style="width:208px;"
            >
              <el-option
                v-for="menuLevelObj in this.GlobalConstants.MENU_LEVEL"
                :key="menuLevelObj.level"
                :label="menuLevelObj.label"
                :value="menuLevelObj.level"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="parentMenuId" label="父级菜单">
          <template>
            <el-select
              title="当菜单层级为1级时，无需选择此项"
              :disabled="addMenuLevel == 1"
              v-model="addMenuModel.parentMenuId"
              placeholder="父级菜单"
              value-key="id"
              style="width:360px;"
            >
              <el-option
                v-for="parentMenu in this.parentMenus"
                :key="parentMenu.id"
                :label="calParentMenuLabel(parentMenu)"
                :value="parentMenu.id"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="description" label="菜单描述">
          <el-input type="textarea" :rows="3" v-model="addMenuModel.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="newMenu">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "menuMgmt",
  data() {
    return {
      listLoading: false,
      pageNo: 1,
      pageSize: 10,
      totalElements: 0,

      menuAliasQry: "",
      menuAlias: "",
      menus: [],

      menuType: "",
      menuLevel: "",

      addMenuLevel: 1,
      addDialogVisible: false,
      addMenuModel: {
        name: "",
        alias: "",
        icon: "",
        type: "LINK",
        description: "",
        parentMenuId: 0
      },

      parentMenus: [
        {
          id: 0
        }
      ],

      defaultParentMenus: [
        {
          id: 0
        }
      ]
    };
  },
  mounted() {
    this.queryMenus();
  },

  watch: {
    addMenuLevel(level, oldLevel) {
      // 一级菜单不请求后台， 直接将parentMenus置空
      if (level == "1") {
        this.parentMenus = this.defaultParentMenus;
        // this.addMenuModel.parentMenuId = 0;
      } else {
        this.$api.menu.queryMenusByLevel(level).then(res => {
          if (!res) {
            return;
          }

          if (res.body.length == 0) {
            this.addMenuLevel = oldLevel;
            this.$message({
              type: "error",
              message: "该级菜单不存在父级菜单，请重新选择"
            });
          } else {
            this.parentMenus = res.body;
          }
        });
      }
    },

    parentMenus(newParentMenus) {
      this.addMenuModel.parentMenuId = newParentMenus[0].id;
    }
  },
  computed: {},
  methods: {
    queryMenus: function() {
      this.pageNo = 1;
      this.queryMenusInner();
    },
    queryMenusInner: function() {
      this.listLoading = true;
      this.$api.menu
        .queryMenusPage(
          this.menuAliasQry,
          this.menuType,
          this.menuLevel,
          this.pageNo,
          this.pageSize
        )
        .then(res => {
          this.listLoading = false;
          if (!res) {
            return;
          }

          this.totalElements = res.body.totalElements;
          this.menus = res.body.list;
        });
    },

    newMenuPre: function() {
      this.addDialogVisible = true;
    },
    newMenu: function() {
      this.$api.menu.newMenu(this.addMenuModel).then(res => {
        if (!res) {
          return;
        }

        this.addDialogVisible = false;
        this.queryMenusInner();
        this.$message({
          type: "success",
          message: "菜单新增成功"
        });
      });
    },

    menuDelete: function(row) {
      let noticeMsg = "此操作将删除该菜单, 是否继续?";

      if (row.type == "NONE") {
        noticeMsg = "此菜单包含子菜单，将一并删除, 是否继续?";
      }

      this.$confirm(noticeMsg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.menu.deleteMenu(row).then(res => {
            if (!res) {
              return;
            }

            this.queryMenusInner();
            this.$message({
              type: "success",
              message: "菜单删除成功"
            });
          });
        })
        .catch(() => {});
    },

    addDialogClose: function() {
      this.addMenuModel = {
        name: "",
        alias: "",
        icon: "",
        type: "LINK",
        description: "",
        parentMenuId: 0
      };

      this.addMenuLevel = 1;
    },

    transMenuType: function(type) {
      if (type == "NONE") {
        return "中间节点";
      } else if (type == "LINK") {
        return "叶子节点";
      }
      return null;
    },

    calParentMenuLabel: function(parentMenu) {
      if (parentMenu.id == 0) {
        return "1级节点无父节点";
      }
      return (
        this.calMenuLevel(parentMenu.id) +
        " | " +
        parentMenu.alias +
        " | " +
        this.transMenuType(parentMenu.type)
      );
    },

    changeMenuType: function(type) {
      if (type == "NONE") {
        this.addMenuModel.name = "";
      }
    },

    //点击分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryMenusInner();
    },

    index: function(idx) {
      return idx + 1 + (this.pageNo - 1) * this.pageSize;
    },
    calMenuLevel: function(id) {
      let varId = id + "";
      let idLength = varId.length;
      // 除以2的原因是每级菜单占两位， 也就是每级菜单最多有99个
      let level = Math.ceil(idLength / 2);
      return level + "级菜单";
    }
  }
};
</script>

<style >
.search_condition_bar {
  padding-top: 10px;
}
.search_result_list {
  margin-top: -8px;
  margin-left: -14px;
}

hr {
  margin-left: -15px;
}
</style>